<template>
	<view class="container">
		<view class="tui-cmtbox">
			<view class="tui-cmt-cell" v-for="(comment,index) in commentViews" :key="index">
				<image :src="comment.avatar" class="tui-avatar"></image>
				<view class="tui-cmt-detail">
					<view class="tui-header-box">
						<view class="tui-cmt-nickname" v-text="comment.nickname"></view>
					</view>
					<view class="tui-cmt-content"  v-text="comment.content"></view>
					<view class="imgs">
						<image v-for="(image,index) in comment.images" :key="index" class="image"  :src="image"></image>
					</view>
					<view class="tui-reply-box" v-if="comment.parentComment">
						<tui-list-cell backgroundColor="#f2f2f2" :size="28" @tap="cmtReply">
							<view class="tui-flex-1 tui-reply-nickname">回复{{comment.parentComment.nickname}}</view>
							<view class="tui-flex-1" v-text="comment.parentComment.content"></view>
						</tui-list-cell>
					</view>
					<view class="tui-footer">
						{{comment.time}}
					</view>
				</view>
			</view>
		</view>
		<tui-nomore v-if="!allowLoading"></tui-nomore> <!--显示没有更多数据-->
	</view>
</template> 



<script>
	import userApi from "@/request/api/userApi.js"
	import communityApi from "@/request/api/communityApi.js"
	import listUtils from "@/utils/ListUtils.js"
	import textUtils from "@/utils/TextUtils.js"
	import relativeTimeGetter from "@/utils/RelativeTimeGetter.js"
	export default {
		data() {
			return {
				commentViews:[
					//评论视图对象的模拟数据
					// {
					// 	nickname:'甘大大小迷弟',
					// 	avatar:'/static/images/tabbar_icon/community_HL.png',
					// 	content:'甘大佬说的非常好',
					// 	time:'一小时前',
					// 	images:[
					// 		"/static/logo.png",
					// 		"/static/logo.png",
					// 		"/static/logo.png"
					// 	],
					// 	parentComment:{
					// 		nickname:'甘大佬',
					// 		content:'SpringBoot的核心原理就是自动配置'
					// 	}
					// }
				],
				page:{
					current:0,
					size:10
				},
				comments:[],
				parentComments:[],
				users:[],
				allowLoading:true,//是否允许加载，如果数据已经全部拉取完毕，就可以关闭了
			}
		},
		props:{
			userId: {
				type: String,
				default: ''
			},
		},
		created(){
			this.asyncExec();
		},
		mounted(){
			uni.$on('onReachBottom',(currentTab)=>{//监听父组件触底事件，触底是拉取数据
				if(this.allowLoading && currentTab=='comment'){
					this.asyncExec();
				}
			});
		},
		methods: {
			/**
			 * 1、根据用户id，查询用户的评论列表
			   2、查询各评论对应的父评论
			   3、查询当前评论相关的所有用户信息
			   4、将各个信息组装成显示需要的对象
			 */
			async asyncExec(){
				//查询用户的评论
				this.page.current++;
				let commentsResult = await communityApi.listCommentByUserId(this.userId,this.page)
				this.comments = [...this.comments,...commentsResult.page.list]
				if(commentsResult.page.list.length < this.page.size){
					this.allowLoading = false;
				}
				
				//查询这些评论对应的父评论
				let parentIds = [];
				this.comments.forEach((comment)=>{
					if(!textUtils.isEmpty(comment.parentId)){
						parentIds.push(comment.parentId)
					}
				})
				
				//查询所有评论中多个用户信息（包括父评论）
				let parentCommentsResult = await communityApi.batchCommentInfo(parentIds);
				let userIds = [this.userId];
				if(parentCommentsResult.code == 0 && parentCommentsResult.data != null){
					this.parentComments = parentCommentsResult.data
					this.parentComments.forEach((comment)=>{
						userIds.push(comment.userId);
					})
				}
				let usersResult = await userApi.batchUserBaseInfo(userIds);
				if(usersResult.code == 0 && usersResult.data != null){
					this.users = usersResult.data
				}
				this.formatToCommentViews();
			},
			/**
			 * 根据评论集合、父评论集合、用户信息，封装成视图显示需要的集合
			 */
			formatToCommentViews(){
				this.commentViews = [];
				//查找当前用户的信息
				let user = listUtils.findElem(this.users,"id",this.userId)
				//遍历评论集合，生成评论视图对象
				this.comments.forEach((comment)=>{
					let commentView = this.fomrmatCommentView(comment,user)
					this.commentViews.push(commentView)
				})
			},
			
			fomrmatCommentView(comment,userInfo){
				//debugger
				let commentView = {}
				//1、封装评论信息
				commentView.nickname = userInfo.nickname
				commentView.avatar = userInfo.avatar
				commentView.content = comment.replyText   //注意，这里要查找出评论里的所有图片，这里先暂时这么写，后期改善
				commentView.time = relativeTimeGetter.getText(comment.createTime); //获取创建时间的相对时间
				
				
				//2、查找该评论的父评论，封装信息
				let parentComment = listUtils.findElem(this.parentComments,"parentId",comment.parentId)
				if(parentComment == null) return commentView;
				//3、查找出该父评论对应的用户信息，封装信息
				commentView.parentComment = {}
				commentView.parentComment.content = parentComment.replyText;
				let parentCommentUser = listUtils.findElem(this.users,"id",parentComment.userId);
				commentView.parentComment.nickname = parentCommentUser.nickname
				return commentView;
			}
		},
		computed: {

		}
		
	}
</script>

<style lang="scss" scoped>
	
	//==================================================
	page {
		// background-color:#fff ;
		//background: #fff;
		//color: #333;
	}
	
	.container {
		height: auto;
		padding: 40rpx 30rpx 110rpx 30rpx;
		box-sizing: border-box;
	}
	.tui-cmtbox {
		padding-bottom: 20rpx;
	}
	
	.tui-cmt-cell {
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		padding-top: 20rpx;
		margin-bottom: 20rpx;
		background-color:#fff ;
		border-radius: 10px;
		
	}
	
	.tui-avatar {
		width: 64rpx;
		height: 64rpx;
		border-radius: 32rpx;
		display: block;
		flex-shrink: 0;
	}
	
	.tui-cmt-detail {
		width: 100%;
		padding-left: 16rpx;
		box-sizing: border-box;
	}
	
	.tui-header-box {
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		font-size: 30rpx;
	}
	
	.tui-cmt-nickname {
		color: #000000;
	}
	
	.tui-cmt-content {
		font-size: 32rpx;
		color: #333;
		text-align: justify;
		padding-top: 8rpx;
		word-break: break-all;
		word-wrap: break-word;
	}
	
	.tui-reply-box {
		width: 92%;
		border-radius: 8rpx;
		overflow: hidden;
		margin-top: 16rpx;
	}
	
	.tui-cell-last {
		display: flex;
		align-items: center;
		word-wrap: break-word;
		color: #5677fc;
	}
	.tui-flex-1 {
		flex: 1;
		width: 100%;
	}
	
	.tui-reply-nickname {
		font-size: 24rpx;
		color: #7a7a7a;
		padding-bottom: 8rpx;
	}
	
	.tui-footer {
		display: flex;
		align-items: center;
		font-size: 24rpx;
		margin-top: 16rpx;
		color: #9a9a9a;
	}
	.tui-safearea-bottom {
		width: 100%;
		height: env(safe-area-inset-bottom);
	}
	
	//图片
	.imgs{
		position:relative;
		padding: 5rpx 0rpx;
	}
	
	.image{
		width: 100rpx;
		height: 100rpx;
		padding: 0rpx 5rpx;
	}
	
</style>
